// @ts-nocheck
import styles from './index.module.less';
import { make } from '../../utils/dom';
import { IconLoader } from '@codexteam/icons';
import { cates, list } from './mock';

class InfoCard {
    static get toolbox() {
        return {
            title: 'InfoCard',
            icon: `<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <defs>
        <style>.cls-1{fill:#ff64c8;}.cls-2{fill:#5233ff;}</style>
        </defs>
        <title/>
        <g data-name="Layer 2" id="Layer_2">
        <path class="cls-1" d="M30.87,14.23,26,22.67V8l3.77,2.18A3,3,0,0,1,30.87,14.23Z"/>
        <path class="cls-1" d="M6,8.26V22.34l-4.6-8a3,3,0,0,1,1.1-4.1Z"/>
        <path class="cls-2" d="M21,4H11A3,3,0,0,0,8,7V25a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V7A3,3,0,0,0,21,4ZM13,8a1,1,0,1,1-1,1A1,1,0,0,1,13,8Zm6,16a1,1,0,1,1,1-1A1,1,0,0,1,19,24Zm-3-4a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z"/>
        <circle class="cls-1" cx="16" cy="16" r="2"/>
        </g>
        </svg>`
        };
    }

    static get isReadOnlySupported() {
        return true;
    }

    constructor({ data, api, config, readOnly }) {
        this.data = {
            cate: data.cate || ''
        };

        this.api = api;

        this.readOnly = readOnly;

        this.wrapper = undefined;
    }

    render() {
        this.wrapper = make('div', styles['cx-custom-infoCard']);
        if (this.data.cate) {
            const wrap = make('div', styles.wrap);
            // 这里的list是从请求获取到的list数据
            for (let i = 0;i < list.length;i++) {
                const item = list[i];
                const card = make('div', styles.card);
                const content = make('div', styles.content);
                const title = make('span', styles.title, { innerHTML: item.name });
                let tags;
                if (item.tag && item.tag.length) {
                    tags = make('div', styles.tags);
                    for (let m = 0;m < item.tag.length;m++) {
                        const tag = item.tag[m];
                        const tagEl = make('span', styles.tag, { innerHTML: tag });
                        tags.append(tagEl);
                    }
                }
                const desc = make('p', styles.desc, { innerHTML: item.desc });
                const action = make('a', styles.action, { href: item.link, innerHTML: '查看' });
                const icon = make('span', '', { innerHTML: '→' });
                action.append(icon);
                content.append(title, tags, desc, action);
                card.append(content);
                wrap.append(card);
            }
            this.wrapper.append(wrap);

        } else {
            // 创建输入框, 按钮
            const controlBox = make('div', styles.controlBox);
            const loading = make('div', styles.loader, { innerHTML: `${IconLoader} 数据加载中......` });
            controlBox.append(loading);

            // 模拟请求
            setTimeout(() => {
                loading.remove();
                if (cates) {
                    const uniKey = Date.now() + 'wep';
                    const radioGroup = make('div', styles['radio-input']);
                    let curCate = '';
                    for (let i = 0;i < cates.length;i++) {
                        const unid = uniKey + cates[i].value;
                        const ipt = make('input', '', { value: cates[i].value, name: uniKey, id: unid, type: 'radio' });
                        const label = make('label', '', { htmlFor: unid, innerHTML: cates[i].label });
                        radioGroup.append(ipt, label);
                        this.api.listeners.on(ipt, 'change', (e) => {
                            curCate = e.target.value;
                        }, false);
                    }
                    const saveBtn = make('div', styles.saveBtn, { innerText: "生成" });
                    controlBox.append(radioGroup, saveBtn);
                    // 监听编辑和保存事件
                    this.api.listeners.on(saveBtn, 'click', () => {
                        const curIdx = this.api.blocks.getCurrentBlockIndex();
                        const curBlock = this.api.blocks.getBlockByIndex(curIdx);
                        this.api.blocks.update(curBlock.id, {
                            cate: curCate
                        });

                    }, false)

                }
            }, 600);


            this.wrapper.append(controlBox);
        }

        return this.wrapper;
    }

    update(text) {
        const curIdx = this.api.blocks.getCurrentBlockIndex();
        const curBlock = this.api.blocks.getBlockByIndex(curIdx);
        this.api.blocks.update(curBlock.id, {
            text
        })
    }

    save(blockContent) {
        return this.data
    }
}

export default InfoCard